<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
           <Detail>
              <template #header>
                 <span>总销售额</span>
                  <svg t="1639983059825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="16" height="16"><path d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z" fill="#707070" p-id="2138"></path><path d="M512 796.736a46.08 46.08 0 0 1-46.912-46.912V480.64A46.08 46.08 0 0 1 512 433.792a46.08 46.08 0 0 1 46.912 46.912v269.12a46.08 46.08 0 0 1-46.912 46.912zM512 364.928a46.08 46.08 0 0 1-46.912-46.912v-43.84A46.08 46.08 0 0 1 512 227.264a46.08 46.08 0 0 1 46.912 46.912v43.84A47.04 47.04 0 0 1 512 364.928z" fill="#707070" p-id="2139"></path></svg>
              </template>
              <template #content>
                 <span>¥&nbsp;&nbsp;126560</span>
              </template>
              <template #charts>
                 <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;<svg t="1639985595779" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10155" width="16" height="16"><path d="M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z" p-id="10156" fill="#1afa29"></path></svg></span>
                  <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;<svg t="1639985720662" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11145" width="16" height="16"><path d="M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z" p-id="11146" fill="#d81e06"></path></svg></span>
              </template>
              <template #footer>
                 <span>日销售额￥&nbsp;&nbsp;12423</span>
              </template>
           </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
             <Detail>
              <template #header>
                 <span>访问量</span>
                  <svg t="1639983059825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="16" height="16"><path d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z" fill="#707070" p-id="2138"></path><path d="M512 796.736a46.08 46.08 0 0 1-46.912-46.912V480.64A46.08 46.08 0 0 1 512 433.792a46.08 46.08 0 0 1 46.912 46.912v269.12a46.08 46.08 0 0 1-46.912 46.912zM512 364.928a46.08 46.08 0 0 1-46.912-46.912v-43.84A46.08 46.08 0 0 1 512 227.264a46.08 46.08 0 0 1 46.912 46.912v43.84A47.04 47.04 0 0 1 512 364.928z" fill="#707070" p-id="2139"></path></svg>
              </template>
              <template #content>
                 <span>¥&nbsp;&nbsp;一个亿</span>
              </template>
              <template #charts>
                  <LineCharts/>
              </template>
              <template #footer>
                 <span>日访问量￥&nbsp;&nbsp;4399</span>
              </template>
           </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
         <Detail>
              <template #header>
                 <span>支付笔数</span>
                  <svg t="1639983059825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="16" height="16"><path d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z" fill="#707070" p-id="2138"></path><path d="M512 796.736a46.08 46.08 0 0 1-46.912-46.912V480.64A46.08 46.08 0 0 1 512 433.792a46.08 46.08 0 0 1 46.912 46.912v269.12a46.08 46.08 0 0 1-46.912 46.912zM512 364.928a46.08 46.08 0 0 1-46.912-46.912v-43.84A46.08 46.08 0 0 1 512 227.264a46.08 46.08 0 0 1 46.912 46.912v43.84A47.04 47.04 0 0 1 512 364.928z" fill="#707070" p-id="2139"></path></svg>
              </template>
              <template #content>
                 <span>¥&nbsp;&nbsp;两个亿</span>
              </template>
              <template #charts>
                <BarCharts/>
              </template>
              <template #footer>
                 <span>转换率￥&nbsp;&nbsp;64%</span>
              </template>
           </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail>
              <template #header>
                 <span>运营活动效果</span>
                  <svg t="1639983059825" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2137" width="16" height="16"><path d="M512 981.312C253.888 981.312 42.688 770.112 42.688 512S253.888 42.688 512 42.688s469.312 211.2 469.312 469.312-211.2 469.312-469.312 469.312z m0-844.8c-206.528 0-375.488 168.96-375.488 375.488S305.472 887.488 512 887.488s375.488-168.96 375.488-375.488S718.528 136.512 512 136.512z" fill="#707070" p-id="2138"></path><path d="M512 796.736a46.08 46.08 0 0 1-46.912-46.912V480.64A46.08 46.08 0 0 1 512 433.792a46.08 46.08 0 0 1 46.912 46.912v269.12a46.08 46.08 0 0 1-46.912 46.912zM512 364.928a46.08 46.08 0 0 1-46.912-46.912v-43.84A46.08 46.08 0 0 1 512 227.264a46.08 46.08 0 0 1 46.912 46.912v43.84A47.04 47.04 0 0 1 512 364.928z" fill="#707070" p-id="2139"></path></svg>
              </template>
              <template #content>
                 <span>&nbsp;&nbsp;78%</span>
              </template>
              <template #charts>
                 <Progress/>
              </template>
              <template #footer>
                 <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;<svg t="1639985595779" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10155" width="16" height="16"><path d="M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z" p-id="10156" fill="#1afa29"></path></svg></span>
                  <span>周同比&nbsp;&nbsp;56.67%&nbsp;&nbsp;<svg t="1639985720662" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11145" width="16" height="16"><path d="M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z" p-id="11146" fill="#d81e06"></path></svg></span>
              </template>
           </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import LineCharts from './lineCharts'
import BarCharts from './barCharts';
import Progress from './progress';
export default {
  name: "",
  components: {
    Detail,
    LineCharts,
    BarCharts,
    Progress
  },
};
</script>

<style scoped>
</style>
